<template>
	<view class="content" >
		<view style="margin: 20rpx 20rpx; width: 100%; ">
			<view class="nameStyle">{{shopinfo.shopName}}</view>
			<view style="display: flex; flex-direction: column;">
				<view style="flex: 1; ">
					<view v-for="(specification,index) in shopinfo.shopSpecificationVOList">
						<view style="margin: 30rpx 0 20rpx 0;">{{specification.specificationName}}</view>
						<view style="display: flex; ">
							<view class="flavourStyle" v-for="(flavour,index) in specification.shopFlavourVOList">
								<view
									:class="determine(JSON.stringify(specification),JSON.stringify(flavour))? 'flavourStyle1':'flavourStyle2'"
									@click="selectFlavour(JSON.stringify(specification),JSON.stringify(flavour))">
									{{flavour.flavourName}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 180rpx; display: flex; flex-direction: column; ">
					<view style="flex: 1; "></view>
					<view style="height: 60rpx; margin-bottom: 20rpx; display: flex;" >
						<view style="width: 400rpx ;" />
						<view v-if="minimumQuantityShow" class="minQuantityStyle" @click="toBuy()">
							{{shopinfo.minimumQuantity}}份起购
						</view>
						<view v-else class="allCenter" style="flex: 1;">
							<image src="../static/des.png" class="food-count" @click="decrease()" />
							<view style="margin: 0 10rpx;font-weight: normal;">{{shopNum}}</view>
							<image src="../static/add2.png" class="food-count" @click="add()" />
						</view>
					</view>
					<view style="display: flex; height: 60rpx;">
						<view style="flex: 1; display: flex; align-items: center; ">
							<view>价格：</view>
							<view style="color: red;">¥{{shopinfo.shopAmount}}</view>
						</view>
						<view style="flex: 1; display: flex;">
							<view style="width: 80rpx;"></view>
							<view class="cartStyle" @click="toCart()">+加入购物车</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Vue from 'vue'
	import common from "../common/common.js"
	export default {
		props: {
			tableNum:0,
			quantityShow:false,
			shopinfo: {
				type: Object,
			}

		},
		data() {
			return {
				shop: {},
				shopNum: 0,
				specificationId:0,
				flavourId:0,
				flavours: [],
				style:false,
				minimumQuantityShow: false
				
			}
		},
		computed: {
			loadDate() {
				this.shop = this.shopinfo
				this.minimumQuantityShow = this.quantityShow
			}
		},
		methods: {
			selectFlavour(param1, param2) {
				const specification = JSON.parse(param1);
				const flavour = JSON.parse(param2);
				const key = specification.specificationId + '-' + flavour.flavourId;
				this.specificationId = specification.specificationId;
				this.flavourId = flavour.flavourId;
				let found = false; // 标志变量，表示是否找到匹配的 specification.specificationId
				if (this.flavours.length > 0) {
					for (var i = 0; i < this.flavours.length; i++) {
						var parts = this.flavours[i].split('-');
						if (parts[0] == specification.specificationId) {
							this.flavours[i] = key;
							found = true;
							break;
						}
					}
				}
				if (!found) {
					this.flavours.push(key);
				}
				// 强制更新组件
				this.$forceUpdate();
			},
			determine(param1, param2) {
				const specification = JSON.parse(param1);
				const flavour = JSON.parse(param2);
				const key = specification.specificationId + '-' + flavour.flavourId;
				return this.flavours.includes(key);
			},
			//购买数量增加
			add() {
				this.shopNum += 1;
			},
			//购买数量减少
			decrease() {
				if (this.shopNum > 0) {
					if(this.shopNum == this.shopinfo.minimumQuantity){
						this.shopNum -= this.shopinfo.minimumQuantity
						this.minimumQuantityShow = true
					}else{
						this.shopNum -= 1
					}
				}
			},
			//起购
			toBuy(){
				this.shopNum = this.shopinfo.minimumQuantity;
				this.minimumQuantityShow = false;
			},
			//加入购物车
			toCart(){
				common.post({
					url: '/orderEat/shopInfo/addCartShopBatch',
					formData: {
						shopId: this.shopinfo.shopId,
						shopName: this.shopinfo.shopName,
						shopPic: this.shopinfo.shopUrl,
						shopNum: this.shopNum,
						shopAmount: this.shopinfo.shopAmount,
						tableId: this.tableNum,
						specificationAndFlavourIds: this.flavours
					},
					success: (res) => {
						this.flavours = []
					}
				}),
				this.$emit('closeSpecification', this.style);//使用父组件的方法closeSpecification
			},


		}
	}
</script>

<style>
	.content {
		background-color: #fff;
		width: 90%;
		position: fixed;
		top: 30%;
		left: 5%;
		right: 0;
		z-index: 90;
		border-radius: 16rpx;
	}

	.nameStyle {
		font-size: 36rpx;
		font-weight: bold;
	}

	.flavourStyle {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flavourStyle1 {
		font-size: 26rpx;
		background-color: #f37b1d;
		color: #fff;
		border-radius: 12rpx;
		margin-right: 20rpx;
		padding: 0 20rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flavourStyle2 {
		font-size: 26rpx;
		background-color: #F3F5F7;
		border-radius: 12rpx;
		margin-right: 20rpx;
		padding: 0 20rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.minQuantityStyle {
		background-color: royalblue;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 20rpx;
		position: relative;
		flex: 1;
	}

	.cartStyle {
		flex: 1;
		background-color: #f37b1d;
		border-radius: 12rpx;
		font-size: 30rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.food-count {
		width: 20px;
		height: 20px;
		color: #CCCCCC;
	}
	
</style>